<template>
  <div class="projectStatistics">
    <div class="searchBox">
      <div class="box1">
        <el-select
          v-model="value1"
          placeholder="请选择项目状态"
          @change="searchBtn"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <button @click="searchBtn">查询</button>
    </div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>任务完成平均时长</span>
      </div>
      <div class="bodyBox">
        <div class="projectGroup">
          <el-table
            :data="tableData"
            height="300"
            :header-cell-style="{
              color: '#333',
              fontWeight: '400',
              fontSize: '14px',
              height: '43px',
              padding: '0',
            }"
            style="width: 100%"
          >
            <el-table-column prop="date" label="项目小组名称" width="230">
            </el-table-column>
            <el-table-column prop="name" label="平均时长 （分）">
            </el-table-column>
          </el-table>
        </div>
        <div class="weekBest">
          <div class="groupBox" style="height: 43px; line-height: 43px">
            <div class="dotBox"></div>
            <div class="dotText">本周最佳小组</div>
          </div>
          <div class="dotName">
            <div class="nameBox">项目小组名称小组名称1</div>
            <div class="timeBox">完成平均时长：30:34:45</div>
            <div class="taskBox">完成任务数 10</div>
          </div>
          <div class="personalBox groupBox">
            <div class="dotBox dotBox1"></div>
            <div class="dotText">本周最佳个人</div>
          </div>
          <div class="dotName">
            <div class="nameBox">梁思雨</div>
            <div class="timeBox timeBox1">完成平均时长：30:34:45</div>
            <div class="taskBox taskBox1">完成任务数 10</div>
          </div>
        </div>
        <div class="taskQuantity">
          <div class="searchBox">
            <div class="box2">
              <span
                :class="index == isactive ? 'active' : ''"
                @click="handelchange(index)"
                :key="index"
                v-for="(item, index) in tablist"
                >{{ item.name }}
              </span>
            </div>
            <div class="box1">
              <el-select
                v-model="value1"
                placeholder="请选择项目状态"
                @change="searchBtn"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <div class="yiBox">&nbsp; — &nbsp;</div>
            <div class="box1">
              <el-select
                v-model="value1"
                placeholder="请选择项目状态"
                @change="searchBtn"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <button @click="searchBtn">查询</button>
          </div>
          <div class="canvsBox">
            <topCon></topCon>
          </div>
        </div>
      </div>
    </el-card>
    <el-card class="box-card1">
      <div class="leftBox">
        <div class="headerBox">项目完成率</div>
        <div class="bodyBox">
          <el-table
            :data="tableData"
            height="195"
            :header-cell-style="{
              color: '#333',
              fontWeight: '400',
              fontSize: '14px',
              height: '43px',
              padding: '0',
            }"
            style="width: 100%"
          >
            <el-table-column prop="date" label="项目小组名称" width="230">
            </el-table-column>
            <el-table-column prop="name" label="项目完成率"> </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="midBox">
        <div class="headerBox">任务完成数排行</div>
        <div class="bodyBox">
          <el-table
            :data="tableData"
            height="195"
            :header-cell-style="{
              color: '#333',
              fontWeight: '400',
              fontSize: '14px',
              height: '43px',
              padding: '0',
            }"
            style="width: 100%"
          >
            <el-table-column prop="date" label="项目小组名称" width="230">
            </el-table-column>
            <el-table-column prop="name" label="完成任务数"> </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="rightBox">
        <div class="headerBox">延期情况排行</div>
        <div class="bodyBox">
          <el-table
            :data="tableData"
            height="195"
            :header-cell-style="{
              color: '#333',
              fontWeight: '400',
              fontSize: '14px',
              height: '43px',
              padding: '0',
            }"
            style="width: 100%"
          >
            <el-table-column prop="date" label="项目小组名称" width="230">
            </el-table-column>
            <el-table-column prop="name" label="延期总天数"> </el-table-column>
          </el-table>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import topCon from '@/components/statistics/commonMis/projectStatisticsEarchs/topCon.vue';
export default {
  name: 'ProjectStatistics',
  components: {topCon},
  props: {},
  data() {
    return {
      value1: null,
      options: [{
        value: null,
        label: '全部任务'
      }, {
        value: 1,
        label: '未开始'
      }, {
        value: 3,
        label: '进行中'
      }, {
        value: 4,
        label: '已结束'
      }],
      tableData: [{
        date: '2016-05-02',
        name: '王小虎'
      }, {
        date: '2016-05-04',
        name: '王小虎'
      }, {
        date: '2016-05-01',
        name: '王小虎'
      }, {
        date: '2016-05-03',
        name: '王小虎'
      }, {
        date: '2016-05-04',
        name: '王小虎'
      }, {
        date: '2016-05-01',
        name: '王小虎'
      }, {
        date: '2016-05-03',
        name: '王小虎'
      }, {
        date: '2016-05-04',
        name: '王小虎'
      }, {
        date: '2016-05-01',
        name: '王小虎'
      }, {
        date: '2016-05-03',
        name: '王小虎'
      }, {
        date: '2016-05-04',
        name: '王小虎'
      }, {
        date: '2016-05-01',
        name: '王小虎'
      }, {
        date: '2016-05-03',
        name: '王小虎'
      }, {
        date: '2016-05-04',
        name: '王小虎'
      }, {
        date: '2016-05-01',
        name: '王小虎'
      }, {
        date: '2016-05-03',
        name: '王小虎'
      }],
      isactive: 0,
      tablist: [
        {name: '上周'},
        {name: '上月'}
      ]
    };
  },
  computed: {},
  watch: {},
  created() {},
  methods: {
    searchBtn() { },
    handelchange(index) {
      this.isactive = index;
    }
  }
};
</script>

<style lang="less" scoped>
.projectStatistics {
  position: relative;
  width: calc(100% - 40px);
  padding: 0 20px;
  overflow: hidden;
  .searchBox {
    width: 850px;
    height: 40px;
    margin-bottom: 20px;
    display: flex;
    margin-top: 10px;
    // justify-content: space-between;
    .box1 {
      position: relative;
      width: 195px;
      font-size: 12px;
    }
    button {
      cursor: pointer;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 25px;
      width: 85px;
      height: 34px;
      background: #2fc0e0;
      border-radius: 4px;
      box-shadow: 0 0 5px #2fc0e0;
      margin-top: 5px;
      margin-left: 20px;
    }
  }
  /deep/.box-card {
    height: 488px;
    .el-card__header {
      height: 40px;
      line-height: 40px;
      background: #eaf8fb;
      padding: 0 30px;
      .clearfix {
        font-size: 18px;
      }
    }
    .el-card__body {
      padding: 10px 30px;
      .bodyBox {
        height: 438px;
        display: flex;
        .projectGroup {
          width: 33%;
          height: 438px;
          border-right: 1px solid #dddddd;
          box-sizing: border-box;
          padding-right: 30px;
          /deep/tr {
            td {
              .cell {
                font-size: 16px;
                color: #666;
              }
            }
          }
        }
        .weekBest {
          width: 20%;
          height: 100%;
          border-right: 1px solid #dddddd;
          box-sizing: border-box;
          padding: 0 36px;
          .groupBox {
            display: flex;
            .dotBox {
              width: 15px;
              height: 15px;
              border-radius: 50%;
              background: #e07f2f;
              margin: auto 5px;
              margin-left: 0;
            }
            .dotBox1 {
              background: #86d717;
            }
            .dotText {
              font-size: 18px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #666666;
            }
          }
          .dotName {
            margin-left: 18px;
            .nameBox {
              height: 33px;
              font-size: 24px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #333333;
              line-height: 33px;
            }
            .timeBox {
              height: 22px;
              font-size: 16px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #e07f2f;
              line-height: 22px;
            }
            .timeBox1 {
              color: #86d717;
            }
            .taskBox {
              height: 22px;
              font-size: 16px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #e07f2f;
              line-height: 22px;
            }
            .taskBox1 {
              color: #86d717;
            }
          }
          .personalBox {
            margin-top: 30px;
            margin-bottom: 10px;
          }
        }
        .taskQuantity {
          width: 47%;
          height: 100%;
          .searchBox {
            // width: 850px;
            height: 40px;
            margin-bottom: 20px;
            display: flex;
            margin-top: 10px;
            // justify-content: space-between;
            .box2 {
              margin: 0 12px 0 34px;
              line-height: 40px;
              span {
                cursor: pointer;
                font-size: 16px;
                margin-right: 14px;
              }
              .active {
                color: #2fc0e0;
              }
            }
            .yiBox {
              font-size: 700;
              color: #ccd9f9;
            }
            .box1 {
              position: relative;
              width: 195px;
              font-size: 12px;
            }
            button {
              cursor: pointer;
              font-size: 16px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #ffffff;
              line-height: 25px;
              width: 85px;
              height: 40px;
              background: #2fc0e0;
              border-radius: 4px;
              box-shadow: 0 0 5px #2fc0e0;
              margin-top: 0;
              margin-left: 42px;
            }
          }
          .canvsBox {
            width: 100%;
            height: 360px;
            margin-left: 26px;
          }
        }
      }
    }
  }
  /deep/.box-card1 {
    height: 356px;
    margin-top: 30px;
    margin-bottom: 30px;
    .el-card__body {
      display: flex;
      height: 356px;
      box-sizing: border-box;
      .leftBox {
        width: 33%;
        height: 100%;
        margin-right: 1%;
        box-shadow: 1px 2px 3px 0px rgba(153, 153, 153, 0.5);
      }
      .midBox {
        width: 32%;
        height: 100%;
        margin-right: 1%;
        box-shadow: 1px 2px 3px 0px rgba(153, 153, 153, 0.5);
      }
      .rightBox {
        width: 33%;
        height: 100%;
        box-shadow: 1px 2px 3px 0px rgba(153, 153, 153, 0.5);
      }
      .headerBox {
        width: 100%;
        height: 40px;
        line-height: 40px;
        color: #2fc0e0;
        background-color: #eaf8fb;
        padding: 0 30px;
        box-sizing: border-box;
      }
      .bodyBox {
        height: calc(100% - 40px);
        padding: 0 20px;
        overflow: hidden;
      }
    }
  }
}
</style>
